<template>
  <div class="">
    <el-card class="header">
      <div>
        <el-button type="primary" size="default" @click="onCreateNewResourceClick()">
          <el-icon>
            <component :is="`el-icon-${toLine('Plus')}`" />
          </el-icon>
          <span>新增权限</span>
          </el-button>
      </div>
    </el-card>
    <el-card>
      <el-table
          :data="allPermission"
          style="width: 100%"
          border row-key="id"
          default-expand-all
          :tree-props="{ children: 'children',hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="资源名称"></el-table-column>
        <el-table-column prop="path" label="访问url"></el-table-column>
        <el-table-column prop="redirect" label="跳转路径"></el-table-column>
        <el-table-column prop="component" label="本地路径"></el-table-column>
        <el-table-column label="图标" width="60" #default="{ row }">
          <el-icon v-if="row.icon.includes('el-icon-')" class="sub-el-icon">
            <component :is="row.icon" />
          </el-icon>
          <!-- 非 element icon -->
          <svg-icon v-else :icon="row.icon"></svg-icon>
        </el-table-column>
        <el-table-column prop="description" label="权限描述"></el-table-column>
        <!--    操作    -->
        <el-table-column label="操作" fixed="right" width="300" #default="{ row }">
          <el-button type="primary" size="default" @click="onEditClick(row.id)"  v-permission="['user.delete']">
            <el-icon>
              <component :is="`el-icon-${toLine('Edit')}`" />
            </el-icon>
            <span>编辑</span>
          </el-button>
          <el-button type="danger" size="default" @click="removeClick(row)"  v-permission="['user.delete']">
            <el-icon>
              <component :is="`el-icon-${toLine('Delete')}`" />
            </el-icon>
            <span>删除</span>
          </el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <create-new-resource v-model="dialogVisible" @updateResource="getPermissionList"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { permissionList, permissionRemove } from '../../../api/permission'
import { ElMessage } from 'element-plus'
import CreateNewResource from './components/CreateNewResource.vue'
import { toLine } from '../../../utils/index'
const dialogVisible = ref(false)
const allPermission = ref([])
const getPermissionList = async () => {
  allPermission.value = await permissionList()
}
const idRef = ref()
const onCreateNewResourceClick = () => {
  dialogVisible.value = true
}
const onEditClick = async (id: string) => {
  dialogVisible.value = true
  idRef.value = id
}
const removeClick = async (row) => {
  if (row.children && row.children.length > 0) {
    ElMessage.warning('当前资源下存在子资源请勿操作')
    return
  } else {
    await permissionRemove(row.id)
  }
  await getPermissionList()
}
getPermissionList()
</script>

<style lang="scss" scoped></style>
